<template>
  <div class="child">
    <h3>子组件</h3>
	<!-- 父级给的东西这里可以直接拿嘛  这样从子组件 拿不到父组件的东西 需要借助 defineProps -->
	<h4> 父亲给的车:{{car}}</h4>
	<h4> 我自己的玩具:{{ toy }}</h4>

	<!-- 这里是定义的事件，当点击这个按钮的时候，触发了父级的 abc 事件， -->
	<button @click="abc(toy)">把玩具给父亲</button>
  </div>
</template>

<script setup lang="ts" name="Child">
// 定义子级的东西
import { ref } from 'vue'
const toy = ref('奥特曼')

// 将子级东西传递给父级 然后这个方法是在父级定义的
// function sendToy(){
 
// }



// 要使用父级传来的东西，这里需要优先定义  这个getToy 也是父级的 也就是意味着 当点击 button的时候 调用的是父类的 getToy 方法
defineProps(['car','abc'])
</script>

<style scoped>
	.child{
		background-color: skyblue;
		padding: 10px;
		box-shadow: 0 0 10px black;
		border-radius: 10px;
	}
</style>
